<template>
    <view>
        <view class="info br-24 pl-30 pr-30 pb-42 pt-32 ft-30 t-3">
            <view class="align-center space-between mb-10" @click="handleSwitch">
                <!-- text-over-1 -->
                <view class="info-list-in ft-36 bold pr-30">
                    {{ hotelInfo.hotelNameZh || ''
                    }}<text v-if="hotelInfo.addressName">({{ hotelInfo.addressName }})</text>
                </view>
                <hj-image
                    class="rightIcon"
                    src="right-03.png"
                    height="26rpx"
                    width="26rpx"
                    mode="aspectFill"
                />
            </view>
            <view class="align-center space-between info-list" @click="handleOpenDate">
                <view class="c-m pr-30">入住时间</view>
                <view class="info-list-in space-between">
                    <viw>{{ startTime || '请选择' }} - {{ endTime || '请选择' }}</viw>
                    <view class="mr-24" v-if="checkInInfo.nightsCount">
                        共{{ checkInInfo.nightsCount || '' }}晚
                    </view>
                </view>
            </view>
            <view class="align-center space-between info-list" @click="handleOpenInfo">
                <view class="c-m pr-30">入住人数</view>
                <view class="info-list-in"
                    >{{ checkInInfo.roomAmount || 1 }}间房 {{ checkInInfo.adult || 1 }}成人
                    {{ checkInInfo.confirmhildren || 0 }}儿童</view
                >
            </view>
            <view class="center ft-32 t-w inquiry br-44 mt-30 bold" @click="handleInquiry"
                >查询</view
            >
        </view>
    </view>
</template>

<script setup>
/**
 * @description 首页信息选择
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
import { throttle } from '@/uni_modules/uview-plus'
import dayjs from 'dayjs/esm/index'
import { useStore } from 'vuex'
const store = useStore()
defineComponent({
    name: 'InfoSelect'
})
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 入住时间
const startTime = computed(() => {
    return checkInInfo.value?.startDate ? dayjs(checkInInfo.value.startDate).format('MM月DD日') : ''
})
const endTime = computed(() => {
    return checkInInfo.value?.endDate ? dayjs(checkInInfo.value.endDate).format('MM月DD日') : ''
})
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')

const emit = defineEmits(['openDate', 'openInfo'])
// 打开日历弹窗
const handleOpenDate = () => {
    emit('openDate')
}
// 打开入住人数弹窗
const handleOpenInfo = () => {
    emit('openInfo')
}

// 查询
const handleInquiry = () => {
    uni.navigateTo({
        url: '/pages/hotel/hotel-list/index'
    })
}

// 切换酒店
const handleSwitch = () => {
    throttle(() => {
        uni.showToast({
            title: '酒店分地址正在筹备中！',
            duration: 2000,
            icon: 'none'
        })
    }, 2500)
}
</script>

<style scoped lang="scss">
.info {
    background: #fff;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    .inquiry {
        height: 88rpx;
        background: $uni-color-primary;
    }
    &-list {
        border-bottom: 1px solid #f1f1f1;
        height: 102rpx;
        &-in {
            flex: 1;
        }
    }
    .rightIcon {
        transform: translateX(6rpx);
    }
}
</style>
